<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <XForm ref="form" :fieldList="fieldList" :options="formOption" :formData="form" :originOption="originOption" />
      </template>
      <template #toolbar_btns>
        <el-button @click="importHandleClick">
          <span class="flex items-center"> <svg-icon icon-class="import" class="mr-[4px]" /> 导出 </span>
        </el-button>
        <div class="ml-auto"></div>
        <FieldSelectBtn :fieldSelectConfig="fieldSelectConfig" @submit="query" />
      </template>
    </VTable>
    <!-- 导出中心 -->
    <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
  </VPage>
</template>

<script setup lang="jsx">
import { ElMessage, ElMessageBox } from "element-plus"
import XForm from "@/components/XForm/index.vue"
import { onMounted, ref, toRefs } from "vue"

import { inventoryDistributeList } from "@/api/salesInventory"

const tableRef = ref()

import FieldSelectBtn from "@/views/salesInventory/components/FieldSelectBtn.vue"

// 导出中心
import DerivedCenter from "@/components/DerivedCenter"
const DerivedCenterRef = ref()
const importHandleClick = async (e) => {
  let condition = {}
  DerivedCenterRef.value.open({
    tag_name: "performance_indicators",
    condition,
  })
}

// 查询
const query = () => {
  tableRef?.value.query()
}
import { getAloneEnum } from "@/utils/enumUtils"
// 获取下拉数据
onMounted(async () => {
  let oneKeys = ["platform", "amazonSite"]
  let optData = await getAloneEnum(oneKeys)
  oneKeys.forEach((key) => {
    originOption.value[key] = optData?.[key]
  })
  originOption.value.amazonSite = originOption.value.amazonSite.map((v) => ({ ...v, value: v.label }))
})

// 枚举 数据
const originOption = ref({})
const formOption = ref({ inline: true })
const publicStyle = { style: { width: "200px" } }
const fieldList = ref([
  {
    field: "warehouse_platform",
    type: "select",
    originField: "platform",
    options: { placeholder: "平台" },
    ...publicStyle,
  },
  {
    field: "country",
    type: "select",
    originField: "amazonSite",
    multiple: true,
    collapseTags: true,
    options: { placeholder: "国家" },
    ...publicStyle,
  },
  // {
  //   field: "sss11",
  //   type: "select",
  //   originField: "platform",
  //   options: {
  //     placeholder: "品牌/贸易",
  //   },
  //   ...publicStyle,
  // },
  {
    field: "create_at",
    type: "dateTimeRangeNorm",
    itemProps: {
      type: "date",
      shortcuts: [],
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD",
    },
    ...publicStyle,
  },
])

// // 列表配置
const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  border: "full",
  // tooltipConfig: {
  //   showAll: true,
  // },
  align: "center",
  columns: [{ field: "platform", title: "服务商", width: 100 }],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => {
        let params = {
          page: page.pageNum,
          page_num: page.pageSize,
          ...form,
        }
        return queryList(params)
      },
    },
  },
  showFooter: true,
  footerMethod({ columns, data }) {
    return [
      columns.map((column, columnIndex) => {
        if (column.field === "platform") {
          return "合计"
        } else {
          return sumNum(data, column.field)
        }
        return ""
      }),
    ]
  },
})
// 合计
const sumNum = (list, field) => {
  let count = 0
  let fields = field?.split(".")
  list.forEach((item) => {
    count += Number(item[fields[0]]?.[fields[1]] || 0)
  })
  return count.toFixed(2)
}

import { filterColumns } from "@/views/salesInventory/components/method.js"

const totalKey = ref("")
const queryList = async (params) => {
  console.log(666666)
  console.log(fieldSelectConfig.value)
  // console.log(JSON.stringify(columnsData))
  // 按筛选条件添加  configColumns
  const { columns, key } = filterColumns(fieldSelectConfig.value.columns, fieldSelectConfig.value.columnsShow)
  totalKey.value = key
  tableRef?.value?.$table.loadColumn(columns)
  return await inventoryDistributeList(params)
}
const fieldSelectConfig = ref({
  save: "overseasInventory",
  columnsShow: [
    // "platform",
    // "transit_num",
    // "us.transit_num",
    // "uk.transit_num",
    // "er.transit_num",
    // "au.transit_num",
    // "total.transit_num",
    // "now_num",
    // "us.now_num",
    // "uk.now_num",
    // "er.now_num",
    // "au.now_num",
    // "total.now_num",
  ],
  columns: [],
})

const configColumns = reactive([
  { title: "美国仓", key: "us", width: 100 },
  { title: "英国仓", key: "uk", width: 100 },
  { title: "欧洲仓", key: "er", width: 100 },
  { title: "澳洲仓", key: "au", width: 100 },
  { title: "总计", key: "total", width: 100 },
])

const tableHeader = {
  transit_num: "在途数量",
  now_num: "在库数量",
  transit_now_num: "在途+在库数量",
  transit_amount: "在途金额",
  now_amount: "在库金额",
  transit_now_amount: "在途+在库金额",
  now_amount_percent: "库金额占比",
  transit_now_amount_percent: "在途+在库金额占比",
  // "上期在途+在库金额占比", "在途+在库金额环比"
}

let columnsHeader = Object.entries(tableHeader).map(([key, val]) => ({
  field: key,
  title: val,
  width: 100,
  children: configColumns.map((v) => ({ ...v, field: `${v.key}.${key}` })),
}))
fieldSelectConfig.value.columns = [...tableOptins.columns, ...columnsHeader]
</script>
<style lang="scss" scoped>
:deep(.vxe-header--row:nth-child(2)) {
  .vxe-header--column {
    // background: #eff3fe !important;
    // background: linear-gradient(pink, pink), linear-gradient(red, red);
    // z-index: 0;
    // border-color: red;
  }
}
</style>
